<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtmBox">

<head>
    <include file='./Public/common/meta.html' />

    <style type="text/css">
    #tiles {
        text-align: center;
        list-style-type: none;
        position: relative;
        margin: 0 0 10px 0;
        padding: 0;
    }
    #tiles li {
        width: 208px;
        background-color: #fff;
        border: solid 1px #e5e5e5;
        display: none;
        cursor: pointer;
    }
    .fallList li{
        margin:5px 0 0 0;
    }
    </style>
    <script type="text/javascript" src="__PUBLIC__/js/plugins/Wookmark/jquery.wookmark.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/plugins/Wookmark/jquery.imagesloaded.js"></script>
</head>

<body>

    <div class="xsWrap">
        <!-- 顶导 -->
        <include file='./Public/common/header.html' />
        <!-- /顶导 -->
        <!-- main -->
        <div class="mainBox clearfix">

            <!-- 专辑标题 -->
            <div class="albumDetailBox clearfix">
                <div class="alTitBox clearfix">
                    <div class="alTit">
                        <h3 class="alTitTxt">专辑名称：{$album.name}</h3>
                        <span class="alSorts">所属分类：{$category}</span>
                    </div>
                    <div class="alTitAc">

                        <p class="acBtn">

                            <if condition="$is_my_album">
                                <a class="btnF" href="__ROOT__/album/edit/{$album.id}">编辑专辑</a>
                                <!-- <a class="btnF" href="#">批量管理采集</a>-->
                        </p>
                        <!-- <p class="titShareBox">
                            <span class="shareTxt">分享：</span>
                            <a class="shareBtn">
                                <span class="shareIcon icon_weibo"></span>
                            </a>
                            <a class="shareBtn">
                                <span class="shareIcon icon_qzone"></span>
                            </a>
                            <a class="shareBtn">
                                <span class="shareIcon icon_weixin"></span>
                            </a>
                        </p> -->
                        </if>
                    </div>
                </div>
                <div class="alUserBox clearfix">
                    <div class="alUser">
                        <a class="nearImg" href="__ROOT__/admin/personal/view.shtml?id={$user.id}">
                           <img src="__PUBLIC__/{:W('My/getUserVal',array($user['id'],'header_img'))}" alt="" height="26" width="26"></a><a class="nearTxt">{$user.username}</a>
                    </div>

                    <div class="alBtn">
                        <a class="btnG">{$post_count} 文章</a><a class="btnG">{$favorites_count} 关注</a>
                    </div>
                </div>
            </div>
            <!-- /专辑标题 -->

            <!-- 瀑布流 -->
            <div class="fallMain">
                <div class="" id="wmain" style="position: relative;margin-top:10px;">
                    <ul class="fallList blogfall" id='tiles'>
                        <li>
                            <a class="albumAddBox" href="__ROOT__/post/add">
                                <span class="albumAdd"></span>
                                <p class="albumAddTxt">添加文章</p>
                            </a>
                        </li>
                        
                             <foreach name="post_list" item="vo">
                          
                         <li>
                            <div class="blogMain">
                                <if condition="$vo.has_picture eq 2">
                                <div class="blogCon">
                                    <a href="__ROOT__/post/{$vo.id}">
                                        <img src="{:W('My/getImgByPostId',array($vo['id']))}" alt="" height="" width="">
                                    </a>
                                </div>
                                <p class="blogTit"><a href="__ROOT__/post/{$vo.id}">{$vo.title}</a>
                                </p>
                                <else/>
                                <p class="blogTit"><a href="__ROOT__/post/{$vo.id}">{$vo.title}</a></p>
                                <div class="blogCon">
                                    <a href="__ROOT__/post/{$vo.id}"><span class="conTxt">
                                    {$vo.content|htmlspecialchars_decode}</span></a>
                                </div>
                                </if>
                            </div>
                            <div class="blogACBox clearfix">
                                <p class="blogAuthor">
                                    <a class="authorHead" href="__ROOT__/admin/personal/view.shtml?id={$vo.user_id}"><img src="__PUBLIC__/{:W('My/getUserVal',array($vo['user_id'],'header_img'))}" alt="" height="26" width="26">
                                    </a>
                                    <a class="authorName" href="__ROOT__/admin/personal/view.shtml?id={$vo.user_id}">{:W('My/getUserVal',array($vo['user_id'],'aliasname'))}</a>
                                </p>
                                
                            </div>
                            <div class="blogDate clearfix">
                                <p class="blogAc">
                                    <a class="zan {:W('My/postFavoritesHave',array($vo["id"],2))}" post_id="{$vo.id}">赞({:W('My/postFavoritesCount',array($vo["id"],2))})</a>
                                    <a class="shoucang {:W('My/postFavoritesHave',array($vo["id"],1))}" post_id="{$vo.id}">收藏({:W('My/postFavoritesCount',array($vo["id"],1))})</a>
                                    <a class="comment" post_id="{$vo.id}">
                                    评论({:W('My/postCommentCount',array($vo["id"]))})</a>
                                </p>
                            </div>
                        </li>
                        </foreach>
                        

                       

                        
                    </ul>
                   

                </div>
            </div>
            <!-- /瀑布流 -->

        </div>

        <!-- /main -->

    </div>

   
   

    <!-- 弹层 -->
    <include file="./Public/common/openWindows.html" />
    <!-- 弹层） -->

     <script type="text/javascript">
    <!--wookmark 瀑布流js-->
    (function($) {
        var page_no = 2;//分页数 从第2页开始
        var album_id = '{$album.id}' ;
        var $tiles = $('#tiles'),
            $handler = $('li', $tiles),
            $main = $('#wmain'),
            $window = $(window),
            $document = $(document),
            options = {
                autoResize: true, // This will auto-update the layout when the browser window is resized.
                container: $main, // Optional, used for some extra CSS styling
                offset: 10, // Optional, the distance between grid items
                itemWidth: 210 // Optional, the width of a grid item
            };

        /**
         * 展示
         */
        function applyLayout() {
            $tiles.imagesLoaded(function() {
                // Destroy the old handler
                if ($handler.wookmarkInstance) {
                    $handler.wookmarkInstance.clear();
                }
                // Create a new layout handler.
                $handler = $('li', $tiles);
                $handler.wookmark(options);
            });
        }

        /**
         *scroll 事件
         */
        function onScroll() {
            // Check if we're within 100 pixels of the bottom edge of the broser window.
            var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
                closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);

            if (closeToBottom) { 
                //AJAX载入的数据
                $.ajax({
                    url: "__ROOT__/album/wookmarkAjax",
                    dataType: "html",
                    data:{
                        'page_no':page_no,
                        'album_id':album_id
                    },
                    success: function(html) {                   
                        if(html!=null&&html!=""){
                            page_no++;
                            //把新数据追加到对象中
                            $tiles.append(html);
                            //重新展示
                            applyLayout();
                             bindEvent();
                        }
                        
                    }
                });

                
            }
        };


        applyLayout();
        bindEvent();

        $window.bind('scroll.wookmark', onScroll);

        function bindEvent () {
             $(".zan").on('click',function(e){
            e.preventDefault();
            <if condition="session('__user__') neq null">
            $.post("__ROOT__/post/favorites",{
                type:2,
                post_id:$(this).attr("post_id")
            },function(data){
               if(data=="add"){                 
                    location.reload();
                }
            });
            <else/>
                alert("请先登录或注册!");
                return;
            </if>
            
            });
            $(".shoucang").on('click',function(e){
                e.preventDefault();
                <if condition="session('__user__') neq null">
                $.post("__ROOT__/post/favorites",{
                    type:1,
                    post_id:$(this).attr("post_id")
                },function(data){
                    if(data=="add"){
                       
                        location.reload();
                    }
                });
                <else/>
                    alert("请先登录或注册!");
                    return;
                </if>
            });
            $(".comment").on('click',function(e){
                e.preventDefault();
                location.href="__ROOT__/post/"+$(this).attr("post_id");
            });
        }

       



    })(jQuery);
    </script>

</body>

</html>
